<template>
  <div class="tree-node">
    <div class="person-block" :class="{ adopted: node.adopted, adoptedDaughter: node.relationshipType === '养女', adoptedSon: node.relationshipType === '养子' }">
      <div class="person-avatar" :class="node.gender">
        {{ node.text.charAt(0) }}
        <span v-if="node.adopted" class="adopted-badge">{{ node.relationshipType === '养女' ? '养女' : '养子' }}</span>
      </div>
      <div class="person-info">
        <div class="person-name">{{ node.text }}</div>
        <div class="person-gender">{{ node.gender === 'male' ? '男' : '女' }}</div>
      </div>
      <div v-if="node.spouse" class="spouse-block">
        <span class="spouse-connector">❤️</span>
        <div class="person-avatar" :class="node.spouse.gender">
          {{ node.spouse.text.charAt(0) }}
        </div>
        <div class="person-info">
          <div class="person-name">{{ node.spouse.text }}</div>
          <div class="person-gender">{{ node.spouse.gender === 'male' ? '男' : '女' }}</div>
        </div>
      </div>
    </div>
    <div v-if="node.children && node.children.length" class="children-block">
      <div class="vertical-line"></div>
      <div class="children-list">
        <div class="child-container" v-for="child in node.children" :key="child.id">
          <FamilyTreeNode :node="child" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FamilyTreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 32px;
}

.person-block {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 8px;
  position: relative;
}
.person-block.adoptedDaughter { /* 养女样式 */
  border-color: #9c27b0;
}
.person-block.adoptedSon { /* 养子样式 */
  border-color: #2196F3;
}
.person-block.adopted {
  border-color: #9c27b0; /* 养女关系使用紫色边框 */
}

.person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
  font-size: 18px;
  position: relative;
}
.person-avatar.male {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
}
.person-avatar.female {
  background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}

.adoptedDaughter .adopted-badge { /* 养女角标样式 */
  background: #9c27b0;
}
.adoptedSon .adopted-badge { /* 养子角标样式 */
  background: #2196F3;
}
.adopted-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #9c27b0; /* 养女关系使用紫色背景 */
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(156,39,176,0.15);
}

.person-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 8px;
}
.person-name {
  font-weight: bold;
  color: #333;
  font-size: 15px;
}
.person-gender {
  color: #888;
  font-size: 12px;
}

.spouse-block {
  display: flex;
  align-items: center;
  margin-left: 16px;
}
.spouse-connector {
  font-size: 18px;
  color: #e91e63;
  margin: 0 8px;
}

.children-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}
.vertical-line {
  width: 2px;
  height: 24px;
  background: #bbb;
  margin-bottom: 4px;
}
.children-list {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}
.child-container {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>